<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分时问候案例</title>
    <style>
        img {
            width: 300px;
        }
    </style>
</head>

<body>
    <!-- 根据不同的时间显示不同的内容 -->
    <img src="https://img0.baidu.com/it/u=444645071,1531140563&fm=253&fmt=auto&app=138&f=GIF?w=240&h=240" alt="">
    <div>上午好</div>
    <script>
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        var date = new Date();
        var h = date.getHours();
        if (h < 12) {
            div.innerHTML = '上午好';
            img.src = 'https://img0.baidu.com/it/u=444645071,1531140563&fm=253&fmt=auto&app=138&f=GIF?w=240&h=240';
        } else if (h > 12 && h < 18) {
            div.innerHTML = '下午好';
            img.src = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftva1.sinaimg.cn%2Fbmiddle%2F9150e4e5gy1g69y1xgcalj208c08c74w.jpg&refer=http%3A%2F%2Ftva1.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654243655&t=3f11748a06ae8ac1fa8eb8d2f311483f';
        } else if (h > 18 && h < 24) {
            div.innerHTML = '晚上好';
            img.src = 'https://img1.baidu.com/it/u=280123371,395535277&fm=253&fmt=auto&app=138&f=GIF?w=240&h=240';
        }
    </script>
    <div style="width: 50px;height: 50px;background-color: aqua;" class="inner"></div>
    <div style="width: 100px;height: 100px; background-color: red;" class="exterior">

    </div>

    <script>
        var ex = document.querySelector('.exterior');
        var inn = document.querySelector('.inner');
        inn.onmouseover = function() {
            ex.style.display = 'none';
        }
        inn.onmouseout = function() {
            ex.style.display = 'block';
        }
    </script>
</body>

</html>